<template>
	<view class="lu-data-select">
		<view class="lu-data-select-box" :style="{ height: multiple ? '100%' : height, border: border }" :class="{ 'lu-select--disabled': disabled }">
			<view class="lu-data-select-content" @click="toggleSelector">
				<view class="wid1" v-if="multiple">
					<view class="lu-data-multiple">
						<view class="tag-calss" v-for="(item, index) in collapseTags ? currentData.slice(0, collapseTagsNum) : currentData" :key="item[valueKey]">
							<view class="ellipsis">{{ item[labelKey] }}</view>
							<view class="lu-img-close" @click.stop="delItem(index)">
								<text class="close-icon"></text>
							</view>
						</view>
						<view v-if="currentData.length > collapseTagsNum && collapseTags" class="tag-calss">
							<span class="text">+{{ currentData.length - collapseTagsNum }}</span>
						</view>
						<input
							v-if="filterable && !disabled"
							type="text"
							:maxlength="-1"
							:focus="showSelector"
							placeholder="请输入关键词"
							@input="inputChange"
							v-model="filterInput"
							@focus="inputFocus"
							@blur="inputBlur"
							placeholder-class="placeholder-class"
							class="lu-data-select-input-multiple"
						/>
						<view class="placeholder-class" v-if="!filterable && !currentData.length">请选择</view>
					</view>
				</view>
				<view class="wid" v-else>
					<view v-if="currentLabel && !showSelector" class="lu-select-text ellipsis">
						{{ currentLabel }}
					</view>
					<input
						v-else
						type="text"
						:maxlength="-1"
						:focus="filterable && showSelector"
						:placeholder="currentLabel || placeholder"
						@input="inputChange"
						v-model="filterInput"
						placeholder-class="placeholder-class"
						class="lu-data-select-input"
					/>
				</view>
				<view class="lu-data-select-close">
					<text class="close-icon" v-if="(currentLabel || (currentData && currentData.length)) && clearable" @click.stop="clear"></text>
					<text class="lu-img arrow" :style="{ transform: showSelector ? 'rotate(0)' : 'rotate(180deg)' }"></text>
				</view>
			</view>
		</view>
		<!-- 选择框 -->
		<view class="lu-select--mask" v-if="showSelector" @click.stop="closeSelector" />
		<view class="lu-select__selector" :style="{ opacity: direction ? 1 : 0 }" :class="getDerect()" v-if="showSelector">
			<view class="lu-popper__arrow"></view>
			<scroll-view scroll-y="true" class="lu-select__selector-scroll" :scroll-with-animation="!virtualList" :scroll-top="scrollTop" @scroll="onScroll">
				<view class="lu-scroll-content">
					<template v-if="filterData.length === 0">
						<view v-if="!$slots.empty" class="lu-select__selector-empty">
							<text>{{ emptyText }}</text>
						</view>
						<slot v-else name="empty"></slot>
					</template>
					<!-- 列表 -->
					<view v-else>
						<view v-if="virtualList" class="v-item" :style="{ height: scrollHeight + 'px' }"></view>
						<view class="lu-item-list" :class="{ 'lu-item-list-position': virtualList }" :style="{ transform: `translateY(${startOffset}px)` }">
							<view
								class="lu-select__selector-item"
								v-for="(item, index) in filterData"
								:key="index"
								@click="change(item)"
								:class="{ 'lu-select_selector-item_active': item.checked, 'lu-data-select--disabled': item.disabled }"
							>
								<!-- 选项插槽 -->
								<template v-if="$slots.option">
									<slot name="option" :row="item" :$index="index"></slot>
								</template>
								<!-- 默认 -->
								<template v-else>
									<view class="item-left" :class="{ ellipsis: !virtualList && showEllipsis }">
										{{ item[labelKey] }}
									</view>
									<text v-if="item.checked" class="checkmark"></text>
								</template>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
/**
 * @description 下拉框组件
 * @tutorial  https://ext.dcloud.net.cn/plugin?name=lu-data-select
 * @property {Array} options 数据列表 ，格式 默认 [{label:'',value:''}]
 * @property {Boolean} clearable 是否可以清空已选项，默认true
 * @property {String} placeholder 输入框的提示文字，默认请选择
 * @property {String} labelKey 显示的文本名称字段，默认label
 * @property {String} valueKey 选中的value值字段，默认value
 * @property {String} filterable 是否可以筛选，默认true
 * @property {String} emptyText 无数时显示的文
 * @property {String} empty 自定空数据的插槽
 * @property {Boolean} disable 是否禁用
 * @property {Boolean} collapseTags 是否折叠选中值，多选
 * @property {Number}  collapseTagsNum 多少选中开始折叠，默认1
 * @property {String} border 边框属性
 * @property {String} height 高度
 * @property {Boolean} showEllipsis 选项过长是否显示省略号
 * @property {Boolean} virtualList 开启虚拟列表
 */
// 视口高度
let winHeight = 0;
// 列表滚动到当前滚动条的位置    开始位置 * 项高
const current_num = Math.ceil(200 / 34);

const isVue3 = () => {
	// #ifdef VUE3
	return true;
	// #endif

	// #ifndef VUE3
	return false;
	// #endif
};

const platform = () => {
	// #ifdef H5
	return 'h5';
	// #endif

	// #ifdef MP
	return 'mp';
	// #endif

	// #ifdef APP-PLUS
	return 'app';
	// #endif

	return 'unknown';
};

export default {
	name: 'lu-data-select',
	mixins: [uniCloud.mixinDatacom || {}],
	props: {
		// 数据
		options: {
			type: Array,
			default: () => []
		},
		value: {
			type: [String, Number],
			default: ''
		},
		modelValue: {
			type: [String, Number, Array],
			default: ''
		},
		// 是否可过滤
		filterable: {
			type: Boolean,
			default: true
		},
		placeholder: {
			type: String,
			default: '请选择'
		},
		clearable: {
			type: Boolean,
			default: true
		},
		multiple: {
			type: Boolean,
			default: false
		},
		// 是否禁用
		disabled: {
			type: Boolean,
			default: false
		},
		labelKey: {
			type: String,
			default: 'label'
		},
		valueKey: {
			type: String,
			default: 'value'
		},
		emptyText: {
			type: String,
			default: '无数据'
		},
		//其他: change返回单一value，objectValue: change返回对象数组
		changeType: {
			type: String,
			default: ''
		},
		// 虚拟列表模式
		virtualList: {
			type: Boolean,
			default: false
		},
		// 边框
		border: {
			type: String,
			default: '1px solid #e5e5e5'
		},
		height: {
			type: String,
			default: '35px'
		},
		// 是否显示省略号
		showEllipsis: {
			type: Boolean,
			default: true
		},
		// 是否折叠选项
		collapseTags: {
			type: Boolean,
			default: false
		},
		// 折叠数量
		collapseTagsNum: {
			type: Number,
			default: 1
		},
		// 虚拟列表配置
		virtualConfig: {
			type: Object,
			default: () => ({
				itemHeight: 34,
				boxHeight: 200,
				bufferSize: 5
			})
		},
		// 加载状态
		loading: {
			type: Boolean,
			default: false
		},
		// 最大选择数量
		maxSelect: {
			type: Number,
			default: Infinity
		},
		// 自定义过滤方法
		filterMethod: {
			type: Function,
			default: null
		},
		// 自定义渲染函数
		renderLabel: {
			type: Function,
			default: null
		}
	},
	data() {
		return {
			currentLabel: null,
			currentData: [],
			showSelector: false,
			scrollTop: 0,
			filterInput: '',
			filterData: [],
			isFoused: false,
			direction: '', //up为向上，down为向下
			startOffset: 0,
			boxHeight: 200, //滚动高度
			itemHeight: 34, //每一项的高度
			scrollHeight: 0,
			curList: [],
			scrollTimer: null, //滚动定时器
			visibleCount: Math.ceil(200 / 34), // 初始化一个默认值
			defaultNum: Math.ceil(200 / 34), // 替代 currentNum 的默认值
			searchDelay: 300,
			searchTimer: null,
			error: null
		};
	},
	computed: {
		//当前选中的选项
		currentIdx() {
			if (this.currentData) {
				return this.filterData.findIndex((item) => item[this.valueKey] === this.currentData[this.valueKey]);
			}
		},
		valueCom() {
			// #ifdef VUE3
			return this.modelValue;
			// #endif
			// #ifndef VUE3
			return this.value;
			// #endif
		},
		localData() {
			try {
				const ls = this.options || [];
				// 创建新对象,避免修改原始数据
				return ls.map((item) => ({
					...item,
					checked: this.multiple ? Array.isArray(this.valueCom) && this.valueCom.includes(item[this.valueKey]) : this.valueCom === item[this.valueKey]
				}));
			} catch (err) {
				this.handleError(err, 'localData');
				return [];
			}
		},
		// 计算当前可显示的数量
		currentNum() {
			return this.virtualList ? Math.ceil(this.boxHeight / this.itemHeight) : this.defaultNum;
		},
		// 缓存数据映射,优化查找性能
		localDataMap() {
			const map = new Map();
			this.localData.forEach((item) => {
				map.set(item[this.valueKey], item);
			});
			return map;
		}
	},
	watch: {
		filterInput: {
			handler(val) {
				this.debounceSearch(val);
			}
		},
		valueCom() {
			this.setDefault();
		},
		// 监听弹出层关闭，滚动位置重置为0
		showSelector(v) {
			if (!v) {
				this.scrollTop = 0;
			}
		},
		localData: {
			handler(val) {
				if (Array.isArray(val)) {
					// 虚拟列表
					if (this.virtualList) {
						this.scrollViewport();
					} else {
						this.filterData = this.localData || [];
					}
					this.setDefault();
				}
			},
			immediate: true
		},
		// 监听virtualConfig变化
		virtualConfig: {
			handler(newVal) {
				this.boxHeight = newVal.boxHeight;
				this.itemHeight = newVal.itemHeight;
				this.visibleCount = Math.ceil(newVal.boxHeight / newVal.itemHeight);
			},
			immediate: true
		},
		options: {
			handler(val) {
				if (!val || !val.length) return;

				// 使用nextTick确保DOM更
				this.$nextTick(() => {
					if (this.virtualList) {
						this.scrollHeight = val.length * this.itemHeight + 16;
						this.scrollViewport();
					} else {
						this.filterData = this.localData;
					}
					this.setDefault();
				});
			},
			immediate: true
		},
		// 监听 boxHeight 或 itemHeight 变化时更新 defaultNum
		boxHeight(val) {
			this.defaultNum = Math.ceil(val / this.itemHeight);
		},
		itemHeight(val) {
			this.defaultNum = Math.ceil(this.boxHeight / val);
		}
	},
	created() {
		// 确保初始化时currentData是数组
		if (!Array.isArray(this.currentData)) {
			this.currentData = this.multiple ? [] : null;
		}
	},
	mounted() {
		this.$nextTick(() => {
			try {
				this.scrollHeight = this.localData.length * this.itemHeight + 16;
				this.getWindowHeight();
			} catch (err) {
				this.handleError(err, 'mounted');
			}
		});
	},
	methods: {
		// 虚拟列表的滚动
		scrollViewport() {
			try {
				let cur_value = null;
				if (this.multiple) {
					const select_values = this.currentData?.map((item) => item[this.valueKey]) || [];
					cur_value = select_values.length ? select_values[0] : null;
				} else {
					cur_value = this.valueCom;
				}

				const item = this.findItem(cur_value);
				let idx = item ? this.localData.indexOf(item) : -1;
				if (idx === -1) idx = 0;

				if (idx >= this.currentNum) {
					this.startOffset = idx * this.itemHeight;
					this.scrollTop = idx * this.itemHeight;
				} else {
					idx = 0;
					this.startOffset = 0;
				}
				this.filterData = this.localData.slice(idx, idx + this.currentNum);
			} catch (err) {
				this.handleError(err, 'scrollViewport');
			}
		},
		onScroll(e) {
			if (!this.virtualList) return;

			const scrollHandler = () => {
				this.handleScroll(e.detail.scrollTop);
			};

			// 平台适配
			if (platform() === 'h5' || platform() === 'app') {
				if (this.scrollTimer) {
					cancelAnimationFrame(this.scrollTimer);
				}
				this.scrollTimer = requestAnimationFrame(scrollHandler);
			} else {
				if (this.scrollTimer) {
					clearTimeout(this.scrollTimer);
				}
				this.scrollTimer = setTimeout(scrollHandler, 16);
			}
		},
		handleScroll(scrollTop) {
			try {
				const { itemHeight, bufferSize } = this.virtualConfig;
				const start = Math.floor(scrollTop / itemHeight);

				const startIndex = Math.max(0, start - bufferSize);
				const endIndex = Math.min(this.localData.length, start + this.visibleCount + bufferSize);

				this.startOffset = startIndex * itemHeight;
				this.scrollTop = scrollTop;

				// 优化数据更新
				if (this._lastStartIndex !== startIndex || this._lastEndIndex !== endIndex) {
					this._lastStartIndex = startIndex;
					this._lastEndIndex = endIndex;
					this.updateVisibleData(startIndex, endIndex);
				}
			} catch (err) {
				this.handleError(err, 'handleScroll');
			}
		},
		updateVisibleData(start, end) {
			const data = this.filterInput ? this.curList : this.localData;
			this.filterData = data.slice(start, end);
		},
		setDefault() {
			try {
				if (!this.localData || !this.localData.length) {
					this.currentData = this.multiple ? [] : null;
					this.currentLabel = '';
					return;
				}

				if (this.multiple) {
					if (!Array.isArray(this.valueCom)) {
						console.warn('[lu-data-select] Multiple mode requires array value');
						this.currentData = [];
						return;
					}
					this.currentData = this.localData.filter((item) => Array.isArray(this.valueCom) && this.valueCom.includes(item[this.valueKey]));
				} else {
					if (this.valueCom || this.valueCom === 0) {
						const item = this.findItem(this.valueCom);
						if (item) {
							this.currentData = item;
							this.currentLabel = String(item[this.labelKey] || '');
						} else {
							this.currentData = null;
							this.currentLabel = '';
						}
					} else {
						this.currentData = null;
						this.currentLabel = '';
					}
				}
			} catch (err) {
				this.handleError(err, 'setDefault');
				this.currentData = this.multiple ? [] : null;
				this.currentLabel = '';
			}
		},
		getDerect() {
			if (this.direction === 'up') {
				return 'lu-select__selector_top';
			} else if (this.direction === 'down') {
				return 'lu-select__selector_bottom';
			}
			return '';
		},
		// 是否选中
		handlerSelect(e, index) {
			console.log(e, index, this.currentIdx);
			if (this.multiple) {
				return this.currentData.findIndex((item) => item[this.valueKey] === e[this.valueKey]) > -1;
			} else {
				return this.currentIdx === index;
			}
		},
		inputFocus(e) {
			this.isFoused = true;
			// console.log("聚焦");
		},
		inputBlur(e) {
			this.isFoused = false;
		},
		inputChange(e) {
			this.$emit('inputChange', e.detail.value);
		},
		delItem(idx) {
			if (this.disabled) {
				return;
			}

			this.currentData.splice(idx, 1);
			this.emitDataMultiple();
		},
		clear() {
			if (this.disabled) {
				return;
			}

			if (this.multiple) {
				this.currentData = [];
				this.emitDataMultiple();
			} else {
				this.currentLabel = null;
				this.currentData = null;
				this.emitData();
			}
			this.filterInput = '';
		},
		change(item) {
			if (!this.validateSelect(item)) return;

			if (this.multiple) {
				const idx = this.currentData.findIndex((e) => e[this.valueKey] === item[this.valueKey]);
				if (idx > -1) {
					this.currentData.splice(idx, 1);
				} else {
					this.currentData.push(item);
				}
				this.emitDataMultiple();
			} else {
				this.showSelector = false;
				this.currentData = item;
				this.currentLabel = this.renderLabel ? this.renderLabel(item) : item[this.labelKey];
				this.filterInput = '';
				this.emitData(item);
			}
		},
		// 发送单选数据
		emitData(item) {
			if (item !== undefined && item !== null) {
				const value = item[this.valueKey];
				const emitValue = this.changeType === 'objectValue' ? item : value;

				this.emitValue(value);
				this.$emit('change', emitValue);
			} else {
				this.emitValue(null);
				this.$emit('change', null);
			}
		},
		//获取窗口高度
		getWindowHeight() {
			// #ifdef APP-PLUS
			try {
				const res = uni.getSystemInfoSync();
				winHeight = res.windowHeight;
			} catch (e) {
				console.error('[lu-data-select] Get window height error:', e);
				winHeight = 667; // 设置一个默认值
			}
			// #endif

			// #ifndef APP-PLUS
			uni.getSystemInfo({
				success: (res) => {
					winHeight = res.windowHeight;
				},
				fail: (err) => {
					console.error('[lu-data-select] Get window height error:', err);
					winHeight = 667;
				}
			});
			// #endif
		},
		// 多选的数据
		emitDataMultiple() {
			const currentValList = this.currentData.map((item) => item[this.valueKey]);
			const emitValue = this.changeType === 'objectValue' ? this.currentData : currentValList;

			this.emitValue(currentValList);
			this.$emit('change', emitValue);
		},
		toggleSelector() {
			if (this.disabled) {
				return;
			}
			if (this.isFoused) {
				// 聚焦时候，一直显示选项
				this.showSelector = true;
			} else {
				this.showSelector = !this.showSelector;
				this.isFoused = false;
				this.filterInput = '';
			}
			this.scrollToView();
			const query = uni.createSelectorQuery().in(this);
			// 获取视口高度
			this.getWindowHeight();
			this.direction = '';
			// console.log(winHeight);
			this.$nextTick(() => {
				// 弹窗为真执行取元素
				if (this.showSelector) {
					// 创建选择器查询请求
					query
						.select('.lu-select__selector-scroll')
						.boundingClientRect((rect) => {
							// console.log(rect);
							if (rect) {
								// 获取元素的位置信息
								const { height, bottom } = rect;
								// console.log(bottom, 'bottom');
								//- 10 预留到底部的距离，防止重叠
								const h = winHeight - bottom - 10;
								// console.log(h);
								if (h < 0) {
									this.direction = 'up'; //向上弹出
									// console.log('向上弹出');
								} else {
									this.direction = 'down'; //向下弹出
									// console.log('向下弹出');
								}
							} else {
								// console.log('未找到元素');
							}
						})
						.exec();
				}
			});
		},
		// 滚动到可视区域
		scrollToView() {
			if (this.virtualList) {
				this.scrollViewport();
				return;
			}

			// #ifdef MP-ALIPAY
			my.createSelectorQuery();
			// #endif

			// #ifndef MP-ALIPAY
			const query = uni.createSelectorQuery().in(this);
			// #endif

			this.$nextTick(() => {
				query
					.select('.lu-select__selector-scroll .lu-scroll-content')
					.boundingClientRect()
					.select('.lu-select__selector-item.lu-select_selector-item_active')
					.boundingClientRect()
					.exec((doms) => {
						// console.log(doms);
						const parentNode = doms[0];
						const childNode = doms[1];
						if (parentNode && childNode) {
							// console.log('有数据');
							// console.log(parentNode);
							// 选中元素的顶部距离 - 父级元素的顶部距离 - scrollView的高度200 +元素的高度 + marginTop
							// console.log(childNode, '子元素');
							const sh = childNode.top - parentNode.top - 200 + childNode.height + 8;
							// console.log(sh, '需要滚动的高度');
							if (sh > 0) {
								this.scrollTop = sh;
							} else {
								this.scrollTop = 0;
							}
							// console.log(this.scrollTop);
						} else {
							// 无数据
							// console.log('没有获取到元');
						}
					});
			});
		},
		// 添加搜索方法
		handleSearch(val) {
			try {
				if (!val) {
					this.curList = this.localData;
					return;
				}

				const searchValue = val.toLowerCase().trim();

				// 使用自定义过滤方法或默认过滤
				if (this.filterMethod) {
					this.curList = this.localData.filter((item) => this.filterMethod(item, searchValue));
				} else {
					this.curList = this.localData.filter((item) => {
						const label = String(item[this.labelKey] || '').toLowerCase();
						return label.includes(searchValue);
					});
				}

				// 更新虚拟列表
				if (this.virtualList) {
					this.scrollTop = 0;
					this.scrollHeight = this.curList.length * this.itemHeight + 16;
					this.filterData = this.curList.slice(0, this.visibleCount);
				} else {
					this.filterData = this.curList;
				}
			} catch (err) {
				this.handleError(err, 'handleSearch');
				this.curList = [];
				this.filterData = [];
			}
		},
		clearTimers() {
			// #ifdef APP-PLUS || H5
			if (this.scrollTimer) {
				cancelAnimationFrame(this.scrollTimer);
			}
			// #endif

			// #ifdef MP
			if (this.scrollTimer) {
				clearTimeout(this.scrollTimer);
			}
			// #endif

			if (this.searchTimer) {
				clearTimeout(this.searchTimer);
			}
		},
		handleError(error, methodName) {
			console.error(`[lu-data-select] Error in ${methodName}:`, error);
			this.error = error;
			const errorType = error instanceof Error ? error.name : 'Unknown';
			this.$emit('error', {
				method: methodName,
				error: error,
				type: errorType
			});
		},
		debounceSearch(val) {
			if (this.searchTimer) {
				clearTimeout(this.searchTimer);
			}

			this.searchTimer = setTimeout(() => {
				try {
					this.handleSearch(val);

					if (this.virtualList) {
						this.scrollTop = 0;
						this.scrollHeight = this.curList.length * this.itemHeight + 16;
						this.filterData = this.curList.slice(0, this.visibleCount);
					} else {
						this.filterData = this.curList;
					}
				} catch (err) {
					this.handleError(err, 'debounceSearch');
				}
			}, this.searchDelay);
		},
		// 添加关闭选择器方法
		closeSelector() {
			this.showSelector = false;
			this.isFoused = false;
			this.filterInput = '';
			this.scrollTop = 0;
		},
		// 统一处理销毁前的逻辑
		handleDestroy() {
			this.clearTimers();
			this.clearCache();
			this.clearEvents();
		},
		clearCache() {
			this._localDataCache = null;
			this._lastOptions = null;
			this._lastValueCom = null;
			this._lastStartIndex = null;
			this._lastEndIndex = null;
			this.currentData = null;
			this.filterData = [];
			this.curList = [];
		},
		// 统一处理销毁后的逻辑
		handleUnmounted() {
			// 清理事件监听
			// #ifdef APP-PLUS
			plus.key.removeEventListener('showKeyboard', this.handleKeyboardShow);
			plus.key.removeEventListener('hideKeyboard', this.handleKeyboardHide);
			// #endif

			// 清理其他可能的引用
			this.direction = '';
			this.scrollTimer = null;
			this.searchTimer = null;
		},
		// 清理事件监听
		clearEvents() {
			// #ifdef APP-PLUS
			try {
				plus.key.removeEventListener('showKeyboard', this.handleKeyboardShow);
				plus.key.removeEventListener('hideKeyboard', this.handleKeyboardHide);
			} catch (err) {
				this.handleError(err, 'clearEvents');
			}
			// #endif
		},
		// 优化查找方法
		findItem(value) {
			return this.localDataMap.get(value);
		},
		emitValue(value, type = 'change') {
			// 统一的事件发射处理
			if (isVue3()) {
				this.$emit('update:modelValue', value);
			} else {
				this.$emit('input', value);
			}

			if (type === 'change') {
				this.$emit('change', value);
			}
		},
		// 选择前的验证
		validateSelect(item) {
			if (this.disabled || item.disabled) {
				return false;
			}

			if (this.multiple && this.currentData.length >= this.maxSelect) {
				this.$emit('maxLimit', this.maxSelect);
				return false;
			}

			return true;
		}
	},
	// Vue2 生命周期
	beforeDestroy() {
		// #ifndef VUE3
		this.handleDestroy();
		// #endif
	},
	destroyed() {
		// #ifndef VUE3
		this.handleUnmounted();
		// #endif
	},

	// Vue3 生命周期
	beforeUnmount() {
		// #ifdef VUE3
		this.handleDestroy();
		// #endif
	},
	unmounted() {
		// #ifdef VUE3
		this.handleUnmounted();
		// #endif
	}
};
</script>
<style lang="scss" scoped>
$minHeight: 35px;
$color: #6a6a6a;
$color2: #606266;

.ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wid1 {
	width: calc(100% - 54px);
}

.wid {
	width: calc(100% - 36px);
}

// 禁用设置
.lu-data-select--disabled,
.lu-select--disabled {
	color: #a8abb2 !important;
	cursor: default !important;
}

.lu-select--disabled {
	background-color: #f5f7fa;
}

.lu-data-select {
	/* #ifndef APP-NVUE */
	position: relative;
	width: 100%;
	background: #fff;
	/* #endif */

	/* #ifdef APP-NVUE */
	flex: 1;
	/* #endif */

	.lu-data-select-box {
		border-radius: 4px;
		box-sizing: border-box;
		width: 100%;
		display: flex;
		align-items: center;
		padding: 0 5px;
		padding-left: 10px;

		.lu-data-select-content {
			min-height: $minHeight;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			// 多选
			.lu-data-multiple {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				flex: 1;
				width: 100%;

				.tag-calss {
					font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
					font-weight: 400;
					-webkit-font-smoothing: antialiased;
					-webkit-tap-highlight-color: transparent;
					font-size: 12px;
					border: 1px solid #d9ecff;
					border-radius: 4px;
					white-space: nowrap;
					height: 24px;
					padding: 4px;
					line-height: 22px;
					box-sizing: border-box;
					margin: 2px;
					display: flex;
					max-width: 100%;
					align-items: center;
					gap: 2px;
					background-color: #f4f4f5;
					border-color: #e9e9eb;
					color: #909399;

					.text {
						font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
						font-weight: 400;
						-webkit-font-smoothing: antialiased;
						-webkit-tap-highlight-color: transparent;
						font-size: 12px;
						line-height: 22px;
						color: #909399;
					}
				}
			}

			.lu-select-text {
				flex: 1;
				font-size: 14px;
				width: 100%;
				color: $color2;
			}

			.lu-data-select-close {
				height: 100%;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				gap: 2px;

				.lu-img {
					transition: 0.3s;
				}
			}
		}

		.lu-data-select-input {
			min-height: $minHeight;
			flex: 1;
			color: $color;
			font-size: 14px;
		}
	}
}

.lu-select__selector {
	position: absolute;
	left: 0;
	z-index: 999;
	width: 100%;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	box-sizing: border-box;
	background-color: #fff;
	transition: opacity 0.3s;
	max-height: calc(100vh - 100px);
	overflow-y: auto;

	/* #ifdef APP-NVUE */
	position: fixed;
	/* #endif */

	.lu-popper__arrow {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		border-width: 10px;
		border-style: solid;
		border-color: transparent;

		&::after {
			position: absolute;
			display: block;
			width: 0;
			height: 0;
			border-color: transparent;
			border-style: solid;
			content: '';
			border-width: 10px;
			margin-left: -10px;
		}
	}

	.lu-select__selector-scroll {
		max-height: 200px;
		box-sizing: border-box;
		font-size: 14px;
		position: relative;

		.lu-select__selector-empty {
			text-align: center;
			padding: 10px 0;
			color: #919191;
		}

		.lu-select__selector-item {
			/* #ifdef MP-WEIXIN */
			-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
			/* #endif */
			display: flex;
			cursor: pointer;
			padding: 8px 10px;
			justify-content: space-between;
			align-items: center;
			gap: 6px;
			color: $color2;

			&:first-child {
				margin-top: 8px;
			}

			&:last-child {
				margin-bottom: 8px;
			}
		}

		.lu-select_selector-item_active {
			background-color: #f5f5f5;
			color: #409eff;
			font-weight: bold;
		}
	}
}

// 头样式
.arrow {
	position: relative;
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 8px solid #a8abb2;
	mix-blend-mode: multiply;
}

// close 图标
.lu-img-close {
	position: relative;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
}

.close-icon {
	position: relative;
	z-index: 4;
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	cursor: pointer;
	margin-left: 2px;
	background-color: #c0c4cc;

	&::before,
	&::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 70%;
		height: 1px;
		background-color: #f9f9f9;
		transform-origin: center;
	}

	&::before {
		transform: translate(-50%, -50%) rotate(45deg);
	}

	&::after {
		transform: translate(-50%, -50%) rotate(-45deg);
	}
}

.lu-select--mask {
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	z-index: 2;
	background-color: transparent;
	pointer-events: auto;

	/* #ifdef APP-NVUE */
	position: fixed;
	/* #endif */
}
</style>
